<template>
    <dialog_item :dialogTitle="dialogTitle" @onBtnDialogClick="onBtnDialogClick" :visible.sync="domainVisible" :isShowConfirmBtn="true">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" v-if="SupportSearchList">
         <el-form-item> <el-input  v-model="searchdata.data.name" :placeholder="$t('msg_domain_name')" @keyup.enter.native="getDomainList" size="mini"></el-input></el-form-item>
        <el-form-item class="paddingLeft0" v-for="elm in SupportSearchList" :key="elm.id">
          <el-input v-model="searchdata.data.fieldExtends[elm.name]" :placeholder="elm.label" @keyup.enter.native="getDomainList" size="mini"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain size="small" @click="getDomainList">{{$t('query')}}</el-button>
          <el-button size="small" @click="resetSearchTableData">{{$t('reset')}}</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        max-height="350"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          :label="$t('enterprise_domain_name')"
          prop="name"
          >
        </el-table-column>
        <el-table-column v-for="(elm,index) in fieldextendsList" :key="index" :prop="elm.name" :label="elm.label"></el-table-column>
      </el-table>
    </dialog_item>
</template>
<script>

export default {
  props: [
    "visible",
    "dialogTitle",
    "parentList",
    "fieldextends"
  ],
  data(){
    return{
      tableData: [],
      selectList: [],
      searchdata:{
        currpage: 1,
        pagelines: 999,
        data:{
          name:"",
          username:'',
          fieldExtends:{}
        }
      },
      formInline: {
        user: '',
        region: ''
      },
      SupportSearchList: [],
      fieldextendsList:[],
      parentListArray:[]
    }
  },
  mounted(){
    this.fieldextends.map((item)=>{
      if(item.isSupportSearch){
        this.SupportSearchList.push(item);
      }
      if(item.enabel){
        this.fieldextendsList.push(item)
      }
    })
    this.getDomainList()
  },
  computed: {
    domainVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      }
    },
  },
  methods:{
    onBtnDialogClick(name){
      if(name=='confirm'){
        this.handleClick()
      }
    },
    /**
     * 获取企业域列表
     */
    getDomainList(){
      this.$api.getDomains(this.searchdata,{
        onSucess: response => {
          if(response.data.errcode == 0){
            let data = response.data.data;
            var datas = [];
            for(let i=0;i<data.datas.length;i++){
              if(data.datas[i].status == 1 && data.datas[i].id != this.$route.query.domainid){
                datas.push(data.datas[i]);
              }
            }
            data.datas = datas;
            this.tableData = data.datas;
            this.parentListArray=JSON.parse(JSON.stringify(this.parentList))
          }
        }
      });
    },
    /**
     * 重置
     */
    resetSearchTableData(){
      this.searchdata.data.fieldExtends = {}
      this.searchdata.data.name=""
      this.getDomainList();
    },
    handleSelectionChange(val){
      this.selectList = val;
    },
    /**
     * 确定按钮
     */
    handleClick(){
      let list = this.selectList;
      if(list.length >0){
        let domainListId = ""
        list.map((item)=>{
          if(domainListId){
            domainListId = domainListId + ";" + item.id;
          }else{
            domainListId = item.id;
          }
          
        })
        this.domainVisible = false;
        this.$emit("selectChecked",domainListId,"parent");
      }else{
        this.$message({
          message: this.$t("msg_setting_domain_select_data"),
          type: 'warning'
        });
      }
    },
  },
  watch:{
    parentListArray(value){
      let that = this;
      let tableData = this.tableData;
      if(value.indexOf(";") > -1){
        let arr = value.split(";");
        this.$nextTick(()=>{
          that.$refs.multipleTable.clearSelection();
          for(let i=0;i<arr.length;i++){
            tableData.map((item)=>{
              if(arr[i] == item.id){
                that.$refs.multipleTable.toggleRowSelection(item,true);
              }
            })
          }
        })
      }else{
        this.$nextTick(()=>{
          that.$refs.multipleTable.clearSelection();
          tableData.map((item)=>{
            if(value == item.id){
              that.$refs.multipleTable.toggleRowSelection(item,true);
            }
          })
        })
      }
    },
  }
}
</script>